<!DOCTYPE html>
<html>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <head>
    <meta charset="utf-8" />
    <title>加入我们-永田之家</title>
    <script src="commonJs/isMobile.js"></script>
    <link rel="stylesheet" id="judge" />
    <script type="text/javascript">
      if (isMobile) {
        document.querySelector('#judge').setAttribute('href', 'css/joinUs-H5.min.css');
      } else {
        document.querySelector('#judge').setAttribute('href', 'css/joinUs.min.css');
      }
    </script>
    <link rel="shorcut icon" type="image/x-icon" href="images/favicon.ico" />
    <link rel="stylesheet" href="http://unpkg.com/element-ui%402.6.1/lib/theme-chalk/index.css" />
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  </head>
  <body>
    <div id="content">
      <!-- 头部 -->
      <div id="head">
        <div class="nav-wrap">
          <a href="index.html"><img src="images/index/logo.png" alt="logo"/></a>
          <nav>
            <ul class="navSelected_4">
              <a href="index.html">首页</a>
              <a href="aboutUsc.html?1">关于我们</a>
              <a href="culturec.html?1">企业文化</a>
              <a href="joinUsc.html?1">加入我们</a>
            </ul>
          </nav>
        </div>
      </div>
      <div id="head-H5">
        <div class="head-title">
          <div class="menu-open">
            <div class="menu-center">
              <div class="top"></div>
              <div class="bottom"></div>
            </div>
          </div>
          <div class="logo">
            <img class="logo-img" src="images/index/logo.png" alt="" />
          </div>
        </div>
        <div class="menu">
          <div class="menu-head">
            <!-- <img class="close" src="http:/images/index/close.png" alt=""> -->
            <img class="logo-w" src="images/index/logo_w.png" alt="" />
          </div>
          <div class="menu-list">
            <a href="index.html"><div class="menu-son">首页</div></a>
            <a href="aboutUsc.html?1"><div class="menu-son">关于我们</div></a>
            <a href="culturec.html?1"><div class="menu-son">企业文化</div></a>
            <a href="joinUsc.html?1"><div class="menu-son border-none">加入我们</div></a>
          </div>
        </div>
      </div>
      <script>
        if (isMobile)
          (function(c, b) {
            var a = {};
            (function() {
              var l = b.querySelector('meta[name="viewport"]'),
                i = b.querySelector('meta[name="hotcss"]'),
                k = c.devicePixelRatio || 1,
                m = 540,
                h = 0;
              k = k >= 3 ? 3 : k >= 2 ? 2 : 1;
              if (i) {
                var f = i.getAttribute('content');
                if (f) {
                  var j = f.match(/initial\-dpr=([\d\.]+)/);
                  if (j) {
                    k = parseFloat(j[1]);
                  }
                  var n = f.match(/max\-width=([\d\.]+)/);
                  if (n) {
                    m = parseFloat(n[1]);
                  }
                  var d = f.match(/design\-width=([\d\.]+)/);
                  if (d) {
                    h = parseFloat(d[1]);
                  }
                }
              }
              b.documentElement.setAttribute('data-dpr', k);
              a.dpr = k;
              b.documentElement.setAttribute('max-width', m);
              a.maxWidth = m;
              if (h) {
                b.documentElement.setAttribute('design-width', h);
                a.designWidth = h;
              }
              var e = 1 / k,
                g =
                  'width=device-width, initial-scale=' +
                  e +
                  ', minimum-scale=' +
                  e +
                  ', maximum-scale=' +
                  e +
                  ', user-scalable=no';
              if (l) {
                l.setAttribute('content', g);
              } else {
                l = b.createElement('meta');
                l.setAttribute('name', 'viewport');
                l.setAttribute('content', g);
                b.head.appendChild(l);
              }
            })();
            a.pxr = function(d, e) {
              if (!e) {
                e = parseInt(a.designWidth, 10);
              }
              return (parseInt(d, 10) * 320) / e / 20;
            };
            a.rem2px = function(e, d) {
              if (!d) {
                d = parseInt(a.designWidth, 10);
              }
              return (e * 20 * d) / 320;
            };
            a.mresize = function() {
              var d = b.documentElement.getBoundingClientRect().width || c.innerWidth;
              if (a.maxWidth && d / a.dpr > a.maxWidth) {
                d = a.maxWidth * a.dpr;
              }
              if (!d) {
                return false;
              }
              b.documentElement.style.fontSize = (d * 20) / 320 + 'px';
              a.callback && a.callback();
            };
            a.mresize();
            c.addEventListener(
              'resize',
              function() {
                clearTimeout(a.tid);
                a.tid = setTimeout(a.mresize, 33);
              },
              false
            );
            c.addEventListener('load', a.mresize, false);
            setTimeout(function() {
              a.mresize();
            }, 333);
            c.hotcss = a;
          })(window, document);
      </script>

      <script>
        window.onscroll = function() {
          //变量t是滚动条滚动时，距离顶部的距离
          var t = document.documentElement.scrollLeft || document.body.scrollLeft;
          var el = document.getElementById('head');
          el.style.left = -t + 'px';
          el.style.width = document.documentElement.clientWidth + t + 'px';
        };
        $(document).ready(function() {
          $('.menu-open').click(function() {
            $('.menu').addClass('show');
            if ($('.top').hasClass('top-show')) {
              $('.top').removeClass('top-show');
              $('.bottom').removeClass('bottom-show');
              $('.top').addClass('top-close');
              $('.bottom').addClass('bottom-close');
              $('.menu').removeClass('show');
            } else {
              $('.top').removeClass('top-close');
              $('.bottom').removeClass('bottom-close');
              $('.top').addClass('top-show');
              $('.bottom').addClass('bottom-show');
            }
          });
        });
      </script>

      <!-- 中间内容 -->
      <div id="center">
        <div
          id="loading"
          style=" position: fixed;width: 100%;height: 100%;left: 0;top: 0;background-color: #fff;z-index: 99999;"
        ></div>
        <div class="top-wrap">
          <div class="top">
            <p>加入我们</p>
            <p>JOIN US</p>
          </div>
        </div>
        <div class="middle">
          <div class="navs">
            <ul>
              <li>
                <div class="nav"><span>供应商招募</span></div>
              </li>
              <li>
                <div class="nav"><span>人才招聘</span></div>
              </li>
            </ul>
          </div>
          <div class="tab tab-1">
            <div class="container">
              <div class="container-1">
                <p class="title title1">合作优势</p>
                <div class="content">
                  <div class="card">
                    <img class="icon-2-1" src="images/joinUs/1.png" alt="icon" />
                    <p>客户广</p>
                    <p>全国拥有大量稳定优<br />质用户</p>
                  </div>
                  <div class="card">
                    <img class="icon-2-2" src="images/joinUs/2.png" alt="icon" />
                    <p>零费用</p>
                    <p>无需缴纳<br />加盟费、上架费</p>
                  </div>
                  <div class="card">
                    <img class="icon-2-3" src="images/joinUs/3.png" alt="icon" />
                    <p>回款快</p>
                    <p>结款周期短<br />回款快</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="apply-form" id="apply-form">
              <div class="title">申请成为供应商</div>
              <div class="form">
                <div class="form-item">
                  <div class="label">选择地区</div>
                  <div class="select1">
                    <select
                      :class="errors.provinceValue?'alertColor':''"
                      name="province"
                      id="privince"
                      v-model="provinceValue"
                      @change="selectProvince"
                    >
                      <option :value="item" v-for="(item, index) in provinces" :key="index">{{
                        item.label
                      }}</option>
                    </select>
                    <div class="choose" v-if="chooseProShow">请选择省份</div>
                    <img class="arrow" src="images/joinUs/arrow.png" alt="" />
                  </div>
                  <div class="select2">
                    <select
                      :class="errors.cityValue?'alertColor':''"
                      name="city"
                      id="city"
                      v-model="cityValue"
                      @change="selectCity"
                    >
                      <option :value="item" v-for="(item, index) in cities" :key="index">{{
                        item.label
                      }}</option>
                    </select>
                    <div class="choose" v-if="chooseCityShow">请选择城市</div>
                    <img class="arrow" src="images/joinUs/arrow.png" alt="" />
                  </div>
                  <div class="select3">
                    <select
                      :class="errors.countryValue?'alertColor':''"
                      name="country"
                      id="country"
                      v-model="countryValue"
                      @change="selectCountry"
                    >
                      <option :value="item" v-for="(item, index) in countries" :key="index">{{
                        item.label
                      }}</option>
                    </select>
                    <div class="choose" v-if="chooseCouShow">请选择区县</div>
                    <img class="arrow" src="images/joinUs/arrow.png" alt="" />
                  </div>
                  <el-select
                    :class="errors.provinceValue?'alertColorSelect':''"
                    v-model="provinceValue"
                    @change="selectProvince"
                    placeholder="请选择省份"
                  >
                    <el-option
                      v-for="item in provinces"
                      :key="item.value"
                      :label="item.label"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                  <el-select
                    class="city-select"
                    :class="errors.cityValue?'alertColorSelect':''"
                    v-model="cityValue"
                    @change="selectCity"
                    placeholder="请选择城市"
                  >
                    <el-option
                      v-for="item in cities"
                      :key="item.value"
                      :label="item.label"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                  <el-select
                    class="city-select"
                    :class="errors.countryValue?'alertColorSelect':''"
                    v-model="countryValue"
                    @change="selectCountry"
                    placeholder="请选择地区"
                  >
                    <el-option
                      v-for="item in countries"
                      :key="item.value"
                      :label="item.label"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </div>
                <div class="form-item">
                  <div class="label">姓名</div>
                  <div id="inp">
                    <input
                      type="text"
                      v-model.trim="name"
                      placeholder="请输入姓名"
                      v-on:blur="checkForm"
                      :class="errors.nameEmpty||errors.nameError ? 'alertColor' : ''"
                      data-key="1"
                      autocomplete="off"
                    />
                  </div>
                </div>
                <div class="form-item">
                  <div class="label">手机号</div>
                  <div id="inp">
                    <input
                      type="tel"
                      maxlength="11"
                      v-model.trim="mobile"
                      placeholder="请输入手机号"
                      v-on:blur="checkForm"
                      :class="errors.telEmpty||errors.telError ? 'alertColor' : ''"
                      data-key="2"
                      autocomplete="off"
                    />
                  </div>
                </div>
                <div class="form-item">
                  <div class="label">验证码</div>
                  <div id="code-inp">
                    <input
                      type="text"
                      id="codeInput"
                      v-model.trim="code"
                      placeholder="请输入验证码"
                      :class="errors.codeEmpty ? 'alertColor' : ''"
                      v-on:blur="checkForm"
                      data-key="3"
                      autocomplete="off"
                    />
                  </div>
                 
                  <img alt="" @click="getCode" :src="imgUrl" />
                </div>
                <div class="form-item">
                  <div class="label">短信验证码</div>
                  <div id="code-inp">
                    <input
                      type="text"
                      v-model.trim="captcha"
                      placeholder="请输入验证码"
                      v-on:blur="checkForm"
                      :class="errors.captchaEmpty ? 'alertColor' : ''"
                      data-key="4"
                      autocomplete="off"
                    />
                  </div>
                  <div v-if="showCountDown" @click="getCaptcha" class="captcha">
                    获取验证码
                  </div>
                  <div v-if="!showCountDown" class="captcha ">
                    <span class="refresh">重新获取</span>
                  </div>
                </div>
                <div @click="submitForm" class="sub-btn">
                  立即申请
                </div>
              </div>
            </div>
          </div>
          <!-- 人才招聘 -->
          <div class="tab tab-2">
            <div class="content">
              <div class="bg-img"></div>
              <p class="win">
                永田之家不仅提供丰厚的薪酬、福利待遇，灵活、人性化的办公环境，而且搭建完善的人才<br />引进、培养、激励机制，让员工能够随着公司的发展一起成长。
              </p>
              <p class="H5">
                永田之家不仅提供丰厚的薪酬、福利待遇，<br />灵活、人性化的办公环境，<br />而且搭建完善的人才引进、培养、激励机制，<br />让员工能够随着公司的发展一起成长。
              </p>
              <div class="btn-wrap">
                <a target="_blank" href="" class="btn">立即申请</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 脚部 -->
      <div id="foot">
        <div class="foot-big-box">
          <div class="foot-box">
            <div class="left-box">
              <div class="left-list">
                <div class="list-son">
                  <p class="title">关于我们</p>
                  <a href="aboutUsc.html?1"><p class="text">企业简介</p></a>
                  <a href="aboutUsc.html?2"><p class="text">核心团队</p></a>
                </div>
                <div class="list-son">
                  <p class="title">企业文化</p>
                  <a href="culturec.html?1"><p class="text">核心理念</p></a>
                  <a href="culturec.html?2"><p class="text">团队建设</p></a>
                </div>
                <div class="list-son">
                  <p class="title">加入我们</p>
                  <a href="joinUsc.html?1"><p class="text">供应商招募</p></a>
                  <a href="joinUsc.html?2"><p class="text">人才招聘</p></a>
                </div>
              </div>
            </div>
            <div class="right-box">
              <div class="list">
                <div class="list-son">
                  <p class="title">联系我们</p>
                  <div class="content">
                    <img src="images/foot/foot1.png" style="width:16px;height: 13px;" alt="" />
                    <a target="_blank" href="http://passport.weibo.com/visitor/visitor9a66.html"
                      ><div>永田之家官微</div></a
                    >
                  </div>
                  <div class="content">
                    <img src="images/foot/foot2.png" style="width:16px;height: 16px;" alt="" />
                    <div>0591-83050790</div>
                  </div>
                  <div class="content">
                    <img src="images/foot/foot3.png" style="width:16px;height: 16px;" alt="" />
                    <div>福建省福州市橘园工业园区</div>
                  </div>
                  <div class="content">
                    <div style="margin-left:25px">悦孚创意园</div>
                  </div>
                </div>
              </div>
              <div class="code">
                <div class="code-son">
                  <img src="images/foot/code1.png" alt="" style="width:100px;height:100px;" />
                  <p>微信公众号二维码</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="foot-icp">
          <div class="icp">
            闽 ICP 备 19004491 号 <a target="_blank" href="manage.html">经营证照</a>
          </div>
        </div>
      </div>
      <div id="foot-H5">
        <div class="fo-head"></div>
        <div class="fo-mes">
          <a href="tel:0591-83050790"><p>电话：0591-83050790</p></a>
          <p>地址：福建省福州市橘园工业园区悦孚创意园</p>
        </div>
        <div class="fo-code">
          <div class="code-son">
            <img src="images/foot/code1.png" alt="" />
            <p>微信公众号二维码</p>
          </div>
        </div>
        <div class="fo-bo">
          <p>闽 ICP 备 19004491 号 <a target="_blank" href="manage.html">经营证照</a></p>
        </div>
      </div>
    </div>
    <script src="commonJs/rotate.js"></script>
    <script src="http://unpkg.com/element-ui%402.6.1/lib/index.js"></script>
    <script>
      $(document).ready(function() {
        var index = window.location.search.substr(1) || 1;
        var nav = $('li').children(); // 导航栏
        var content = $('.tab'); // 内容
        $(nav).removeClass('active');
        $(nav[index - 1]).addClass('active');

        $.each(content, function(i, n) {
          $(n).css({ display: 'none' });
        });
        $(content[index - 1]).css({ display: 'block' });

        $.each(nav, function(index, item) {
          $(item).click(function() {
            if (!$(item).hasClass('active')) {
              // 切换页面
              $.each(content, function(i, n) {
                $(n).css({ display: 'none' });
              });
              $(content[index]).css({ display: 'block' });
              // 字体变色
              $.each(nav, function(i, n) {
                $(n).removeClass('active');
              });
              $(item).addClass('active');
            }
          });
        });
      });
      $('#loading').attr('style', 'display:none');
    </script>
  </body>
</html>
